<a href="http://github.com/angular/angular.js/tree/v1.2.0rc1/src/ng/directive/ngClass.js#L72" class="view-source btn btn-action"><i class="icon-zoom-in"> </i> View source</a><a href="http://github.com/angular/angular.js/edit/master/src/ng/directive/ngClass.js" class="improve-docs btn btn-primary"><i class="icon-edit"> </i> Improve this doc</a><h1><code ng:non-bindable="">ngClass</code>
<div><span class="hint">directive in module <code ng:non-bindable="">ng</code>
</span>
</div>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><div class="ng-directive-page ng-directive-ngclass-page"><p>The <code>ngClass</code> allows you to set CSS classes on HTML an element, dynamically, by databinding
an expression that represents all classes to be added.</p>
<p>The directive won&#39;t add duplicate classes if a particular class was already set.</p>
<p>When the expression changes, the previously added classes are removed and only then the
new classes are added.</p>
</div></div>
<h2 id="Usage">Usage</h2>
<div class="usage">as attribute<pre class="prettyprint linenums">&lt;ANY ng-class="{expression}"&gt;
   ...
&lt;/ANY&gt;</pre>
as class<pre class="prettyprint linenums">&lt;ANY class="ng-class: {expression};"&gt;
   ...
&lt;/ANY&gt;</pre>
<h3 id="Animations">Animations</h3>
<div class="animations"><ul><li>add - happens just before the class is applied to the element</li><li>remove - happens just before the class is removed from the element</li></ul></div>
<a href="api/ngAnimate.$animate">Click here</a> to learn more about the steps involved in the animation.<h4 id="parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>ngClass</td><td><a href="" class="label type-hint type-hint-expression">expression</a></td><td><div class="ng-directive-page ng-directive-ngclass-page"><p><a href="guide/expression">Expression</a> to eval. The result
of the evaluation can be a string representing space delimited class
names, an array, or a map of class names to boolean values. In the case of a map, the
names of the properties whose values are truthy will be added as css classes to the
element.</p>
</div></td></tr></tbody></table></div>
<h2 id="Example">Example</h2>
<div class="example"><div class="ng-directive-page ng-directive-ngclass-page"><p>Example that demostrates basic bindings via ngClass directive.
<h4>Source</h2>
<div source-edit="" source-edit-deps="angular.js" source-edit-html="index.html-52" source-edit-css="style.css-53" source-edit-js="" source-edit-json="" source-edit-unit="" source-edit-scenario="scenario.js-54"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-52" ng-html-wrap=" angular.js"></pre>
<script type="text/ng-template" id="index.html-52">
    <p ng-class="{strike: strike, bold: bold, red: red}">Map Syntax Example</p>
    <input type="checkbox" ng-model="bold"> bold
    <input type="checkbox" ng-model="strike"> strike
    <input type="checkbox" ng-model="red"> red
    <hr>
    <p ng-class="style">Using String Syntax</p>
    <input type="text" ng-model="style" placeholder="Type: bold strike red">
    <hr>
    <p ng-class="[style1, style2, style3]">Using Array Syntax</p>
    <input ng-model="style1" placeholder="Type: bold"><br>
    <input ng-model="style2" placeholder="Type: strike"><br>
    <input ng-model="style3" placeholder="Type: red"><br>
  </script>
</div>
<div class="tab-pane" title="style.css">
<pre class="prettyprint linenums" ng-set-text="style.css-53"></pre>
<style type="text/css" id="style.css-53">
    .strike {
      text-decoration: line-through;
    }
    .bold {
        font-weight: bold;
    }
    .red {
        color: red;
    }
  </style>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-54"></pre>
<script type="text/ng-template" id="scenario.js-54">
    it('should let you toggle the class', function() {

      expect(element('.doc-example-live p:first').prop('className')).not().toMatch(/bold/);
      expect(element('.doc-example-live p:first').prop('className')).not().toMatch(/red/);

      input('bold').check();
      expect(element('.doc-example-live p:first').prop('className')).toMatch(/bold/);

      input('red').check();
      expect(element('.doc-example-live p:first').prop('className')).toMatch(/red/);
    });

    it('should let you toggle string example', function() {
      expect(element('.doc-example-live p:nth-of-type(2)').prop('className')).toBe('');
      input('style').enter('red');
      expect(element('.doc-example-live p:nth-of-type(2)').prop('className')).toBe('red');
    });

    it('array example should have 3 classes', function() {
      expect(element('.doc-example-live p:last').prop('className')).toBe('');
      input('style1').enter('bold');
      input('style2').enter('strike');
      input('style3').enter('red');
      expect(element('.doc-example-live p:last').prop('className')).toBe('bold strike red');
    });
  </script>
</div>
</div><h2>Demo</h2>
<div class="well doc-example-live animate-container" ng-embed-app="" ng-set-html="index.html-52" ng-eval-javascript=""></div>
<h2>Animations</h2>
<p>The example below demonstrates how to perform animations using ngClass.</p>
<h2>Source</h2>
<div source-edit="" source-edit-deps="angular.js angular-animate.js" source-edit-html="index.html-55" source-edit-css="style.css-56" source-edit-js="" source-edit-json="" source-edit-unit="" source-edit-scenario="scenario.js-57"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-55" ng-html-wrap=" angular.js angular-animate.js"></pre>
<script type="text/ng-template" id="index.html-55">
   <input type="button" value="set" ng-click="myVar='my-class'">
   <input type="button" value="clear" ng-click="myVar=''">
   <br>
   <span ng-class="myVar">Sample Text</span>
  </script>
</div>
<div class="tab-pane" title="style.css">
<pre class="prettyprint linenums" ng-set-text="style.css-56"></pre>
<style type="text/css" id="style.css-56">
    .my-class-add, .my-class-remove {
      -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
      -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
      -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
      transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    }

    .my-class,
    .my-class-add.my-class-add-active {
      color: red;
      font-size:3em;
    }

    .my-class-remove.my-class-remove-active {
      font-size:1.0em;
      color:black;
    }
  </style>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-57"></pre>
<script type="text/ng-template" id="scenario.js-57">
    it('should check ng-class', function() {
      expect(element('.doc-example-live span').prop('className')).not().
        toMatch(/my-class/);

      using('.doc-example-live').element(':button:first').click();

      expect(element('.doc-example-live span').prop('className')).
        toMatch(/my-class/);

      using('.doc-example-live').element(':button:last').click();

      expect(element('.doc-example-live span').prop('className')).not().
        toMatch(/my-class/);
    });
  </script>
</div>
</div><div class="pull-right"> <button class="btn btn-primary" ng-click="animationsOff=true" ng-hide="animationsOff">Animations on</button> <button class="btn btn-primary disabled" ng-click="animationsOff=false" ng-show="animationsOff">Animations off</button></div><h2>Demo</h2>
<div class="well doc-example-live animate-container" ng-class="{'animations-off':animationsOff == true}" ng-embed-app="" ng-set-html="index.html-55" ng-eval-javascript=""></div>
<h2>ngClass and pre-existing CSS3 Transitions/Animations</h4>
<p>The ngClass directive still supports CSS3 Transitions/Animations even if they do not follow the ngAnimate CSS naming structure.
Therefore, if any CSS3 Transition/Animation styles (outside of ngAnimate) are set on the element, then, if a ngClass animation
is triggered, the ngClass animation will be skipped so that ngAnimate can allow for the pre-existing transition or animation to
take over. This restriction allows for ngClass to still work with standard CSS3 Transitions/Animations that are defined
outside of ngAnimate.</p>
</div></div>
</div>
